<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
<!--    处理默认样式-->
    <link rel="stylesheet" href="css/reset.css">
<!--    公共的css-->
    <link rel="stylesheet" href="css/style.css">
<!--    首页的css-->
    <link rel="stylesheet" href="css/index.css">
<!--    引入页面标题图标-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<!--    引入字体图标-->
    <link rel="stylesheet" href="font/iconfont.css" />
</head>
<body>
    <!--    顶部S-->
    <div class="page-top">
        <div class="container">
            <div class="top-lt">
                <a href="" >小米商城</a>
                <span>|</span>
                <a href="" >MIUI</a>
                <span>|</span>
                <a href="" >IoT</a>
                <span>|</span>
                <a href="" >云服务</a>
                <span>|</span>
                <a href="" >天星数科</a>
                <span>|</span>
                <a href="" >有品</a>
                <span>|</span>
                <a href="" >小爱开放平台</a>
                <span>|</span>
                <a href="" >企业团购</a>
                <span>|</span>
                <a href="" >资质证照</a>
                <span>|</span>
                <a href="" >协议规则</a>
                <span>|</span>
                <a href="" class="download">
                    下载app
                    <div class="down-box"><img src="img/download.PNG" alt="小米商城" /><i>小米商城app</i>
                    </div>
                </a>
                <span>|</span>
                <a href="" >智能生活</a>
                <span>|</span>
                <a href="" >Select Location</a>
            </div>
            <div class="top-rt">
                <div class="car-box">
                    <a href="" class="tit">
                        <i class="iconfont icon-gouwuchekong"></i>
                            购物车
                            (<span>0</span>)
                    </a>
                    <div class="pop">
<!--                        <p class="no-good">购物车中还没有商品，赶紧选购吧！</p>-->
                            <ul class="list">
                                <li>
                                    <a href="" class="pic"><img src="img/mi10.PNG"></a>
                                    <div class="txt">小米10全网通</div>
                                    <div class="num">
                                        <h4>3299元 X 1</h4>
                                        <i>X</i>
                                    </div>
                                </li>
                                <li>
                                    <a href="" class="pic"><img src="img/mi10.PNG"></a>
                                    <div class="txt">小米10全网通全网通全网通全网通全网通</div>
                                    <div class="num">
                                        <h4>3299元 X 1</h4>
                                        <i>X</i>
                                    </div>
                                </li>
                                <li>
                                    <a href="" class="pic"><img src="img/mi10.PNG"></a>
                                    <div class="txt">小米10全网通</div>
                                    <div class="num">
                                        <h4>3299元 X 1</h4>
                                        <i>X</i>
                                    </div>
                                </li>
                                <li>
                                    <a href="" class="pic"><img src="img/mi10.PNG"></a>
                                    <div class="txt">小米10全网通</div>
                                    <div class="num">
                                        <h4>3299元 X 1</h4>
                                        <i>X</i>
                                    </div>
                                </li>
                                <li>
                                    <a href="" class="pic"><img src="img/mi10.PNG"></a>
                                    <div class="txt">小米10全网通</div>
                                    <div class="num">
                                        <h4>3299元 X 1</h4>
                                        <i>X</i>
                                    </div>
                                </li>
                            </ul>
                        <div class="total">
                            <div class="price">
                                <p>共8件商品</p>
                                <h3>6062元</h3>
                            </div>
                            <a href="" class="btn">立即结算</a>
                        </div>
                    </div>
                </div>
<!--                <div class="login">-->
<!--                    <a href="" >登录</a>-->
<!--                    <span>|</span>-->
<!--                    <a href="" >注册</a>-->
<!--                    <span>|</span>-->
<!--                    <a href="" >消息通知</a>-->
<!--                </div>-->
                <div class="user-info">
                    <div class="user">
                        <a href="" class="tit">用户~~</a>
                        <ul>
                            <li><a href="">个人中心</a></li>
                            <li><a href="">评价晒单</a></li>
                            <li><a href="">我的喜欢</a></li>
                            <li><a href="">小米账号</a></li>
                            <li><a href="">推出登录</a></li>
                        </ul>
                    </div>
                    <a href="" class="link">消息通知</a>
                    <span>|</span>
                    <a href="" class="link">我的订单</a>
                </div>
            </div>
        </div>
    </div>
    <!--顶部E-->
    <!--    导航S-->
    <div class="page-nav">
        <div class="container">
            <a href="" class="logo"></a>
            <ul class="nav">
                <li class="nav-item" id="page-all-nav">
                    <a href="" class="tit">全部商品分类</a>
<!--                    全部商品分类下拉菜单-->
                    <div class="slider-nav">
                        <ul class="slider-ul">
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                                <div class="slider-pop">
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                    <a href="" class="pop-li">
                                        <img src="img/mi10.PNG">
                                        <p>小米9</p>
                                    </a>
                                </div>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                            <li class="slider-li">
                                <a href="" class="name">
                                    <span>手机</span>
                                    <span>电话卡</span>
                                    <i class="iconfont icon-xiangyou1"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">Xiaomi手机</a>
                    <div class="pop">
                        <ul class="down-ul container">
                            <li class="down-li">
                                <span class="tags">新品</span>
                                <a href="" class="pic">
                                    <img src="img/mi10.PNG">
                                </a>
                                <h3 class="name">小米9</h3>
                                <p class="price">2999元</p>
                                <i></i>
                            </li>
                            <li class="down-li">
                                <span class="tags">新品</span>
                                <a href="" class="pic">
                                    <img src="img/mi10.PNG">
                                </a>
                                <h3 class="name">小米9</h3>
                                <p class="price">2999元</p>
                                <i></i>
                            </li>
                            <li class="down-li">
                                <span class="tags">新品</span>
                                <a href="" class="pic">
                                    <img src="img/mi10.PNG">
                                </a>
                                <h3 class="name">小米9</h3>
                                <p class="price">2999元</p>
                                <i></i>
                            </li>
                            <li class="down-li">
                                <span class="tags">新品</span>
                                <a href="" class="pic">
                                    <img src="img/mi10.PNG">
                                </a>
                                <h3 class="name">小米9</h3>
                                <p class="price">2999元</p>
                                <i></i>
                            </li>
                            <li class="down-li">
                                <span class="tags">新品</span>
                                <a href="" class="pic">
                                    <img src="img/mi10.PNG">
                                </a>
                                <h3 class="name">小米9</h3>
                                <p class="price">2999元</p>
                                <i></i>
                            </li>
                            <li class="down-li last">
                                <span class="tags">新品</span>
                                <a href="" class="pic">
                                    <img src="img/mi10.PNG">
                                </a>
                                <h3 class="name">小米9</h3>
                                <p class="price">2999元</p>
                                <i></i>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">Redmi 红米</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">电视</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">笔记本</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">平板</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">家电</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">路由器</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">服务</a>
                </li>
                <li class="nav-item">
                    <a href="" class="tit">社区</a>
                </li>

            </ul>
<!--            <div class="search active">-->
            <div class="search">
                <form action="" method="post">
                    <input type="text" class="q"/>
                    <input type="submit" value="" class="btn"/>
                    <div class="tags">
                        <span>小米9</span>
                        <span>小米9SE</span>
                    </div>

                </form>
                <ul class="hot">
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>小米6</span>
                            <i>约有6件</i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--    导航E-->
<!--    轮播导航S-->
    <div class="idx-banner container">
        <ul class="banner-list">
            <li><img src="img/banner1.png" alt=""><a href="http://www.baidu.com"></a></li>
            <li><img src="img/banner2.PNG" alt=""><a href=""></a></li>
            <li><img src="img/banner3.PNG" alt=""><a href=""></a></li>
            <li><img src="img/banner4.PNG" alt=""><a href=""></a></li>
        </ul>
        <a href="" class="btn btn-prev"></a>
        <a href="" class="btn btn-next"></a>
        <div class="page">
            <a href=""><span></span></a>
            <a href=""><span></span></a>
            <a href=""><span></span></a>
            <a href=""><span></span></a>
        </div>
    </div>
<!--    轮播导航E-->
<!--菜单和广告S-->
    <div class="idx-menu-adv container">
        <ul class="menu">
           <li class="br bb"><a href=""><img src="img/menu.png"><span>保障服务</span></a></li>
           <li class="br bb"><a href=""><img src="img/menu1.PNG"><span>企业团购</span></a></li>
           <li class="bb"><a href=""><img src="img/menu2.PNG"><span>F码通道</span></a></li>
           <li class="br"><a href=""><img src="img/menu3.PNG"><span>米粉卡</span></a></li>
           <li class="br"><a href=""><img src="img/menu4.PNG"><span>以旧换新</span></a></li>
           <li><a href=""><img src="img/menu5.PNG"><span>话费充值</span></a></li>
        </ul>
        <a href="" class="pic"><img src="img/adv1.PNG"></a>
        <a href="" class="pic"><img src="img/adv2.png"></a>
        <a href="" class="pic"><img src="img/adv3.png"></a>
    </div>
<!--菜单和广告E-->
<!--广告图S-->
    <div class="idx-adv container">
        <a href=""><img src="img/adv4.PNG"></a>
    </div>
<!--广告图E-->
<!--大内容区S-->
    <div class="idx-container">
        <div class="container">
            <div class="idx-title">
                <span class="tit">手机</span>
                <a class="see-all" href="">查看全部<i class="iconfont icon-xiangyou1"></i></a>
            </div>
<!--            手机-->
            <div class="idx-phone idx-box">
                <div class="adv-box col-5">
                    <a href="" class="single"><img src="img/adv5.PNG"></a>
                </div>
                <div class="goods-box">
                    <div class="col-5 good-item">
                        <span class="tags new">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列Redmi Note 11 Pro系列Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍3200万高清质感自拍3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags new">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags new">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags new">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags discount">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags discount">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags discount">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                    <div class="col-5 good-item">
                        <span class="tags discount">新品</span>
                        <a href="" class="pic"><img src="img/mi11.png"></a>
                        <h3 class="name"><a href="">Redmi Note 11 Pro系列</a></h3>
                        <h4 class="desc">3200万高清质感自拍</h4>
                        <p class="price"><span>1599元</span><i>1999元</i></p>
                    </div>
                </div>
            </div>
            <div class="idx-adv">
                <a href=""><img src="img/adv4.PNG"></a>
            </div>
        </div>
    </div>
<!--大内容区E-->
</body>
</html>







